<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Lib tool where we go</title>

	<link rel="stylesheet" href="<?php echo URL ;?>public/css/style.css" ></link>
	<script type="text/javascript" src="<?php echo URL ;?>public/js/jquery.js" ></script>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAgSi6dfpgY9uU9MqmgO6fKs3o1yXlF0I0&sensor=true" ></script>
	<script type="text/javascript" src="<?php echo URL ;?>public/js/js_lib.js" ></script>
	<script type="text/javascript" src="<?php echo URL ;?>public/js/GMap.js" ></script>
	<script type="text/javascript" src="<?php echo URL ;?>public/js/markerwithlabel.js" ></script>
 <style type="text/css">
    .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 60px;     
   border: 2px solid black;
   white-space: nowrap;
 }
</style>
	<script type="text/javascript">
	window.onload = function initialize()
{
	var address = [];
	address.push('35 Phố huế hoàn kiếm hà nội');
	address.push('40 Phố huế hoàn kiếm hà nội');
	address.push('50 Phố huế hoàn kiếm hà nội');
	address.push('3 Phố huế hoàn kiếm hà nội');
	address.push('15 Phố huế hoàn kiếm hà nội');
	address.push('20 Phố huế hoàn kiếm hà nội');
	var geocoder, map;
	var markers = [], infoWindowList = [];
	var infowindow = null;
	
	codeAddress(address[0]);

	function codeAddress(item) {

	    geocoder = new google.maps.Geocoder();
	    geocoder.geocode({
	        'address': item
	    }, 
	    function(results, status) {
	        if (status == google.maps.GeocoderStatus.OK) {
	        	var location = results[0].geometry.location;
	            var myOptions = {
	                center:location,
					zoom:16,
					panControl:false,
					zoomControl:true,
					mapTypeControl:false,
					scaleControl:false,
					streetViewControl:false,
					overviewMapControl:false,
					rotateControl:false,
				    zoomControlOptions: {
			      		style:google.maps.ZoomControlStyle.SMALL
				    },
					mapTypeId:google.maps.MapTypeId.ROADMAP
	            }

	            map = new google.maps.Map(document.getElementById("m_homePage"), myOptions);
			}
        });
	    for(var i = 0 ; i < address.length ; i++)
		{
        	var item = address[i];
		    geocoder.geocode({
	        	'address': item
		    }, 
		    function(results, status) {
		        if (status == google.maps.GeocoderStatus.OK) {
		        	addMarker(results[0].geometry.location,results[0].formatted_address);
		        }
		    });
		}
	}

	function addMarker(location,item) {
		var image = {
		    url: 'public/img/gifts.png',
		    // This marker is 20 pixels wide by 32 pixels tall.
		    size: new google.maps.Size(35, 32),
		    // The origin for this image is 0,0.
		    origin: new google.maps.Point(0,0),
		    // The anchor for this image is the base of the flagpole at 0,32.
		    anchor: new google.maps.Point(0, 32)
	  	};
		  // Shapes define the clickable region of the icon.
		  // The type defines an HTML &lt;area&gt; element 'poly' which
		  // traces out a polygon as a series of X,Y points. The final
		  // coordinate closes the poly by connecting to the first
		  // coordinate.
	  	var shape = {
	      	coords: [1, 1, 1, 20, 18, 20, 18 , 1],
	      	type: 'poly'
	  	};
		var marker = new google.maps.Marker({
		    position: location,
		    map: map,
		    icon: image,
	        shape: shape,
	        title: 'title',
	        zIndex: 4
		});
		console.log(google.maps.Point(19, 30));
		markers.push(marker);
	    string_conten = 'Chào mừng tới : ' + item;
		infowindow = new google.maps.InfoWindow({maxWidth:150});

        
		google.maps.event.addListener(marker, 'mouseover', (function(marker, content) {
            return function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
        })(marker, string_conten));

        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
        });
	}
}

	</script></head>
<body>
	<div id="container">
		<div id="header">
		</div><!-- end header-->